<template>
	<div class="musicList" v-if="!!srcImg">
		<ul>
			<li @click="songerM2" v-for="item in imgList">
				<div class="musicImg">
					<musicImg :src="item.pic_radio"></musicImg>
				</div>
				<p>{{item.artist_name}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	import musicImg from "./img.vue";
	export default {
		name:"musicList",
		props:["srcImg"],
		data(){
			return{
				
			}
		},
		methods:{
			songerM2(){
				this.$router.push("/songerM2");
			}
		},
		computed:{
			imgList(){
				return this.srcImg.song_list;	
			}
		},
		components:{
			musicImg,
		}
	}
</script>

<style scoped lang="scss">
		.musicList{
			width: 100%;
			margin-left: 1.11%;
		}
		ul li{
			width: 31.11%;
			height: 80px;
			display: inline-block;
			margin-left: 1.11%;
			color: white;
			text-align: center;
			margin-top: 2%;
			p{
				font-size: 16px;
				color: white;
				margin-top: 2%;
				overflow: hidden; 
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.musicImg{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		img{
			width: 100%;
			height: 100%;
		}
</style>